Web Development Tools | Dev Notes

← Back

WEB DEVELOPMENT TOOLS, VITE, NODE.JS, AND NPM

Web development tools help developers automate repetitive work and manage modern frontend projects.

This note explains automation tools, Vite, Node.js, npm, project setup, scripts, and dependencies in simple language.

You will learn:

what automation means in web development
what Vite is
what Node.js is
what npm is
how to create a project with Vite
what package.json is
how to install dependencies
how to run scripts
how to install and remove packages
the difference between dependencies and devDependencies

1. What are web development tools?

Web development tools help developers automate repetitive tasks.

Instead of doing everything manually, these tools can:

build code
compile code
optimize files
test code
manage packages
prepare the project for production
help with documentation and monitoring

Diagram 1. Main idea of automation

Developer work
|
|- write code
`- many routine tasks

Automation tools
-> do routine work faster
-> developer focuses on functionality

Automation tools save time and reduce manual work. That is why they are very important in modern projects.

2. What can automation tools do?

Automation tools can handle many important tasks:

combine and minify JavaScript and CSS
compile preprocessors like LESS or SASS
optimize images
prepare code for different browsers
lint and test code
manage dependencies with npm
create production builds
help with monitoring and documentation

Diagram 2. What automation tools do

Automation tools
|
|- build code
|- compile code
|- optimize files
|- support browsers
|- test and lint
|- manage packages
|- create production build
`- help with docs / monitoring

This means automation tools are not only about one job. They support many parts of the development process.

3. What is Vite?

Vite is a project build tool for creating JavaScript-based web applications.

Its name comes from the French word for "fast", and speed is one of its biggest advantages.

Diagram 3. Vite in one sentence

Vite
-> fast tool for building and developing web projects

Vite helps you start projects quickly and see changes almost instantly while developing.

4. Main features of Vite

Vite has several useful features:

fast loading and reloading
quick project creation
support for JavaScript, TypeScript, CSS, and popular frameworks
use of the modern ESM module system
Hot Module Replacement, or HMR
plugin system
built-in CSS and preprocessor support

Diagram 4. Vite features

Vite
|
|- fast development
|- quick project creation
|- modern modules
|- HMR
|- plugin system
`- CSS support

This is why Vite is popular: it gives a modern development experience and reduces waiting time.

5. What is HMR?

HMR means Hot Module Replacement.

It allows Vite to update changed code in real time without reloading the whole page.

Diagram 5. HMR idea

You change code
-> Vite updates only changed module
-> page updates fast
-> full reload is not needed

This makes development smoother and faster because you immediately see the result of your changes.

6. What is Node.js?

To use modern web development tools, you need Node.js installed on your computer.

Node.js is a lightweight and efficient JavaScript runtime that works outside the browser.

At first, Node.js was created for server-side applications, but later it became the base for many frontend development tools too.

Diagram 6. Node.js idea

JavaScript in browser
-> normal frontend code

Node.js
-> JavaScript outside browser
-> used for tools and automation

Node.js is important because many frontend tools depend on it.

7. Installing Node.js

Install the current LTS version of Node.js for your operating system.

After installation, check whether it works with this command:

node --version

If installation was successful, the terminal will show the installed Node.js version.

Diagram 7. Checking Node.js

Install Node.js
-> open terminal
-> run: node --version
-> see installed version

8. What is npm?

npm means Node Package Manager.

It is installed automatically together with Node.js and is used to install, update, remove, and manage packages in a project.

You can check whether npm works with:

npm --version

Diagram 8. npm idea

Node.js installed
-> npm also becomes available
-> npm manages project packages

If Node.js is the environment, npm is the tool that manages libraries and dependencies.

9. First npm configuration

You can configure npm with your name and email:

npm config set init-author-name "YOUR_NAME"
npm config set init-author-email "YOUR_EMAIL"

This is useful because future projects can use this information as project author metadata.

10. Creating a Vite project

The basic process is:

open the terminal
go to your projects folder with cd
check where you are with pwd
run the project creation command

npm create vite@latest

During creation, the system may ask for permission to install create-vite@latest. In that case, type y and press Enter.

Diagram 9. Vite project creation

Open terminal
-> go to projects folder
-> run: npm create vite@latest
-> project skeleton is created

This command creates the starting structure of a new Vite project.

11. The `package.json` file

After a Vite project is created, one of the most important files is package.json.

package.json stores:

project information
dependencies
scripts
instructions for recreating the project setup

Example

{
  "name": "my-vite-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^7.2.4"
  }
}

Diagram 10. What `package.json` does

package.json
|
|- project info
|- scripts
|- dependencies
`- devDependencies

This file is like the control center of the project.

12. Installing project dependencies

After creating the project, you need to install its dependencies.

Use:

npm install

or the short version:

npm i

This command downloads all dependencies listed in package.json and places them into the node_modules folder.

Diagram 11. Installing dependencies

package.json lists packages
-> run: npm install
-> packages are downloaded
-> saved in node_modules

Without this step, the project may not work because required packages are missing.

13. What is `node_modules`?

node_modules is the folder where project dependencies are stored.

Important points:

packages are downloaded there
it should not be uploaded to GitHub
each developer has their own copy
.gitignore usually already excludes it in a Vite project

Diagram 12. `node_modules`

npm install
-> downloads packages
-> places them into node_modules

Think of node_modules as the warehouse of external packages used by the project.

14. What is `package-lock.json`?

When dependencies are installed, npm also creates package-lock.json.

It is a snapshot of the dependency tree. It helps make sure the whole team uses the same package versions.

npm updates it automatically when dependencies are added, removed, or changed.

Diagram 13. `package-lock.json`

Dependencies installed
-> npm records exact versions
-> package-lock.json is updated

This file helps keep the environment consistent across different computers.

15. Scripts in `package.json`

The scripts field stores shortcuts for commands you run often.

Example

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

The script name is the alias, and the value is the actual command.

Diagram 14. Script structure

scripts
|
|- dev     -> vite
|- build   -> vite build
`- preview -> vite preview

This makes commands easier to remember and run.

16. Running scripts

To run a script, use:

npm run [script-name]

Example:

npm run dev

This starts the local development server.

Diagram 15. Running a script

npm run dev
-> runs script named "dev"
-> starts Vite development server

17. Starting the development server

Running this command starts a local development server:

npm run dev

The project usually becomes available at:

http://localhost:5173

When you edit project files, the changes appear immediately.

To stop the server, press:

Ctrl + C on Windows
Control + C on macOS and Linux

Diagram 16. Development server flow

npm run dev
-> local server starts
-> open localhost in browser
-> see project live

This is the main command you use during development.

18. What is a package or dependency?

A dependency is a package that solves a certain task.

Packages are tools or libraries shared by developers so others do not need to reinvent the same solution.

npm has three main parts:

package registry
npm website
CLI in the terminal

Diagram 17. npm ecosystem

npm
|
|- package registry
|- npm website
`- command line interface

This means npm is not only one command. It is a full ecosystem for packages.

19. Installing a package

To install a package into your project, use:

npm install [package-name]

or the short version:

npm i [package-name]

Example:

npm i validator

After installation:

the package is downloaded to node_modules
package.json is updated automatically
the package appears in the dependencies field

Diagram 18. Installing a package

npm i validator
-> package downloaded
-> saved in node_modules
-> package.json updated

20. Using an installed package

After installation, import the package and use its methods in your code.

Example

import validator from "validator";

console.log(
  "Is mango@mail.com a valid email?: ",
  validator.isEmail("mango@mail.com")
);

console.log(
  "Is Mangodogmail.com a valid email?: ",
  validator.isEmail("Mangodogmail.com")
);

The import gives access to the package interface, and then its methods can be used in your code.

Diagram 19. Package use flow

Install package
-> import package
-> use its methods in code

This is the normal workflow for using npm packages.

21. Removing a package

If you no longer need a package, remove it with:

npm uninstall [package-name]

Example:

npm uninstall validator

After removal, package.json is updated automatically.

Diagram 20. Removing a package

npm uninstall validator
-> package removed
-> package.json updated automatically

22. Types of dependencies

There are two important dependency types:

dependencies
devDependencies

`dependencies`

Packages needed in the final product.

`devDependencies`

Packages needed only during development.

Useful flags:

--save adds to dependencies
--save-dev adds to devDependencies

If no flag is specified, --save is used by default.

Diagram 21. Dependency types

dependencies
-> needed in final project

devDependencies
-> needed only for development

Easy memory rule:

dependencies = app needs it
devDependencies = developer needs it

23. Example of development dependency

To install a package as a development dependency, use:

npm i myDep --save-dev

This adds the package to devDependencies.

Diagram 22. `--save-dev`

npm i myDep --save-dev
-> package installed
-> saved in devDependencies

24. Easy memory rules

Node.js = JavaScript runtime outside browser
npm = package manager
Vite = fast build tool

package.json = project control file
node_modules = folder with installed packages
package-lock.json = exact version snapshot

npm install = install project dependencies
npm run dev = start development server
npm i packageName = install one package
npm uninstall packageName = remove one package

25. Quick summary

Automation tools help reduce routine work in web development.
Vite is a fast build tool for JavaScript web applications.
Node.js is needed to run modern web development tools.
npm is installed with Node.js and manages packages.
npm create vite@latest creates a new Vite project.
package.json stores scripts, dependencies, and project info.
npm install installs all dependencies from package.json.
npm run dev starts the local development server.
npm i packageName installs a package.
npm uninstall packageName removes a package.
dependencies are for the final project, and devDependencies are for development tools.

26. Final conclusion

If you understand these ideas:

automation
Vite
Node.js
npm
package.json
node_modules
package-lock.json
scripts
dependencies
devDependencies

then you already have a strong foundation for using modern web development tools.

These tools are very important because modern frontend development is built around them.

← Back

WEB DEVELOPMENT TOOLS, VITE, NODE.JS, AND NPM

1. What are web development tools?

Diagram 1. Main idea of automation

2. What can automation tools do?

Diagram 2. What automation tools do

3. What is Vite?

Diagram 3. Vite in one sentence

4. Main features of Vite

Diagram 4. Vite features

5. What is HMR?

Diagram 5. HMR idea

6. What is Node.js?

Diagram 6. Node.js idea

7. Installing Node.js

Diagram 7. Checking Node.js

8. What is npm?

Diagram 8. npm idea

9. First npm configuration

10. Creating a Vite project

Diagram 9. Vite project creation

11. The package.json file

Example

Diagram 10. What package.json does

12. Installing project dependencies

Diagram 11. Installing dependencies

13. What is node_modules?

Diagram 12. node_modules

14. What is package-lock.json?

Diagram 13. package-lock.json

15. Scripts in package.json

Example

Diagram 14. Script structure

16. Running scripts

Diagram 15. Running a script

17. Starting the development server

Diagram 16. Development server flow

18. What is a package or dependency?

Diagram 17. npm ecosystem

19. Installing a package

Diagram 18. Installing a package

20. Using an installed package

Example

Diagram 19. Package use flow

21. Removing a package

Diagram 20. Removing a package

22. Types of dependencies

dependencies

devDependencies

Diagram 21. Dependency types

23. Example of development dependency

Diagram 22. --save-dev

24. Easy memory rules

25. Quick summary

26. Final conclusion

11. The `package.json` file

Diagram 10. What `package.json` does

13. What is `node_modules`?

Diagram 12. `node_modules`

14. What is `package-lock.json`?

Diagram 13. `package-lock.json`

15. Scripts in `package.json`

`dependencies`

`devDependencies`

Diagram 22. `--save-dev`